<template>
    <main role="main">

        <section class="jumbotron text-center">
            <div class="container">
                <h1>hermit图书借阅</h1>
                <p class="lead text-muted">
                    噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。
                </p>
                <p>
                    <a class="btn btn-yellow my-2 p-3 font-weight-bold">
                        <router-link to="/member/member">热门书籍</router-link>
                    </a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="btn btn-yellow my-2 p-3 font-weight-bold">
                        <router-link to="/member/borrow">我要借书</router-link>
                    </a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="btn btn-yellow my-2 p-3 font-weight-bold">
                        <router-link to="/member/record">借阅记录</router-link>
                    </a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a @click="logout" class="btn btn-dark my-2 p-3 font-weight-bold">退出登录</a>
                </p>
            </div>
        </section>

        <div class="album py-5 bg-light">
            <div class="container">
                <!--热门课程-->
                <div class="title">我的借阅记录 {{this.loginUser.name}}</div>
                <hr>
                <table id="simple-table" class="table  table-bordered table-hover">
                    <thead>
                    <tr>
                        <th> ID</th>
                        <th> 图书名称</th>
                        <th> 出版社</th>
                        <th> 作者</th>
                        <th> 书籍简介</th>
                        <th> 图书编号</th>
                        <th> 借书时间</th>
                        <th> 归还时间</th>
                        <th> 状态</th>
                        <th> 归还</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="bbsBook in bbsBooks" :key="bbsBook.num">
                        <td> {{bbsBook.id}}</td>
                        <td> {{bbsBook.name}}</td>
                        <td> {{bbsBook.press}}</td>
                        <td> {{bbsBook.author}}</td>
                        <td> {{bbsBook.comment}}</td>
                        <td> {{bbsBook.code}}</td>
                        <td> {{bbsBook.borrowTime}}</td>
                        <td> {{bbsBook.returnTime}}</td>
                        <td>
                            <el-tag type="danger" v-if="bbsBook.status === 0">未归还</el-tag>
                            <el-tag type="primary" v-if="bbsBook.status === 1">已完成</el-tag>
                        </td>
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <button v-on:click="returnBook(bbsBook)" class="btn btn-xs btn-info" v-if="bbsBook.status === 0">
                                    还书
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</template>
<script>
  import bbsBookApi from "../../api/work/bbsBook";
  import {apiDefaultErrorHandler} from "../../api/base";

  export default {
    name: 'index',
    data: function () {
      return {
        bbsBooks: [],
        loginUser: {}
      }
    },
    mounted() {
      //重新加载js
      $.getScript('ace/assets/js/ace.min.js');
      this.loginUser = Tool.getLoginUser();
      this.list()
    },
    methods: {
      /**查询借阅书籍记录信息*/
      list() {
        let _this = this;
        Loading.show();
        bbsBookApi.queryRecord({id: this.loginUser.id}).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            _this.bbsBooks = data.res
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        });
        Loading.hide();
      },
      /**还书*/
      returnBook(bbsAdministrator) {
        let _this = this;
        _this.borrow = bbsAdministrator
        _this.borrow.memberId = this.loginUser.id
        Loading.show();
        bbsBookApi.returnBook(this.borrow).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            if (data.res === '还书成功') {
              toast.success(data.res)
            } else {
              toast.error(data.res)
            }
            this.list()
          } else {
            toast.error('操作失败')
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          toast.error('操作失败')
          apiDefaultErrorHandler(ex)
        });
        Loading.hide();
      },
      /**退出登录*/
      logout() {
        Tool.setLoginUser(null);
        this.$router.push("/login");
      },
    },
  }
</script>
<style>
    .title {
        margin-bottom: 2rem;
        color: transparent;
        -webkit-text-stroke: 1px black;
        letter-spacing: 0.04rem;
        font-size: 2rem;
    }

    .title_dot {
        background: #EEE url() repeat;
        text-shadow: 5px -5px black, 4px -4px white;
        font-weight: bold;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text
    }

</style>